<template>
  <div class="category">
    <div class="category-left">
      <!-- 侧边栏导航 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
       v-for="category in categories"
       :key="category.id"
       :title="category.name"
       :to="`/category/sub-category/${category.id}`" />

      </van-sidebar>
    </div>
    <!-- 商品分类详情 -->
    <div class="category-right">
      <router-view />
    </div>
  </div>
</template>

<script>
import { getCategory } from '@/api/category'
export default {
  name: 'Category',

  data() {
    return {
      activeKey: 0,
      categories: [],
    }
  },

  created() {
    getCategory()
      .then(data => {
        this.categories = data.list.slice(1)
        this.$router.push('/category/sub-category/' + this.categories[0].id)
      })
  },
}
</script>

<style lang="less" scoped>
  .category {
    display: flex;
    height: 100%;
    &-left {
      width: 160px;
      height: 100%;
    }
    &-right {
      flex: 1;
    }
  }
</style>
